<template>
  <div class="box">
    <a-input-search
      placeholder="输入地址"
      style="width: 400px"
      defaultValue="ws://localhost:8080/"
      enter-button
      @search="initSocket"
    />
    <div class="canvas-wrapper">
      <canvas ref="videoPlayer"></canvas>
    </div>
  </div>
</template>
<script>
import noJpg from "../assets/404.jpg";

export default {
  data() {
    return {
      ctx: null,
      socket: null,
      socketStatus: false,
    };
  },
  mounted() {
    this.initContext();
  },
  unmounted() {
    this.closeSocket();
  },
  methods: {
    initContext() {
      this.ctx = this.$refs.videoPlayer.getContext("2d");
      const img = new Image();
      img.src = new URL(noJpg); //缺省图片
      img.onload = () => {
        this.$refs.videoPlayer.width = img.naturalWidth;
        this.$refs.videoPlayer.height = img.naturalHeight;

        this.ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
      };
    },
    initSocket(src) {
      this.closeSocket();
      if (!src) {
        return;
      }
      const socket = new WebSocket(src);
      socket.onopen = () => {
        this.socketStatus = true;
        console.log("websocket连接成功！");
      };
      socket.onmessage = (evt) => {
        console.log("接收", evt.data);
        // const blob = new Blob([evt.data], { type: "image/jpg" }); // 创建Blob对象
        const url = URL.createObjectURL(evt.data); // 创建可访问的URL
        const img = new Image(); // 创建Image对象
        img.onload = () => {
          // 图片加载完成后绘制到canvas上
          this.ctx.clearRect(
            0,
            0,
            this.$refs.videoPlayer.clientWidth,
            this.$refs.videoPlayer.clientHeight
          ); // 清除画布（如果需要）

          this.$refs.videoPlayer.width = img.naturalWidth;
          this.$refs.videoPlayer.height = img.naturalHeight;

          this.ctx.drawImage(img, 0, 0); // 将图片绘制到canvas上
          URL.revokeObjectURL(url); // 释放URL对象
        };
        img.src = url; // 设置图片源为Blob URL
      };
      socket.onClose = () => {
        this.socketStatus = false;
        console.log("websocket连接关闭!");
      };
      socket.onerror = () => {
        let rec = 0;
        console.log("websocket连接错误!尝试重新连接");
        if (this.socketStatus) {
          // 如果已经连上就不在重连了
          clearTimeout(rec);
          rec = 0;
          return;
        }
        rec = setTimeout(function() {
          this.initSocket(src);
        }, 10000); // 延迟10秒重连  避免过多次过频繁请求重连
      };
      this.socket = socket;
    },
    closeSocket() {
      if (this.socket) {
        this.socket.close();
        this.socket = null;
        this.socketStatus = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .canvas-wrapper {
    height: calc(100% - 32px);
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;

    canvas {
      z-index: 9999;
      width: 100%;
      height: 100%;
      background: none;
    }
  }
}
</style>
